<div ng-if="::!layer.get('loading')" class="flex-col">
  <div class="flex-row width-100 flex-align-stretch">
    <div class="flex-col">
      <input type="checkbox" id="layer-{{$index}}" ng-model="layer.visible" title="{{'layerVisible'|translate}}"/>

      <div class="gn-layer-actions">
        <div gn-popover gn-popover-placement="bottom">
          <a gn-popover-anchor role="button" tabindex="0"
             aria-label="{{'settings' | translate}}"
             class="fa fa-cog"></a>
          <div gn-popover-content class="layermanager-item-menu">
            <ul role="menu">

              <!--Zoom to extent-->
              <li class="" role="menuitem">
                <a href="" data-ng-click="zoomToExtent(layer, map)">
                  <span translate="">layerExtentZoom</span>
                </a>
              </li>

              <!--Open Metadata-->
              <li class=""
                  role="menuitem"
                  data-ng-if="layer.get('md') || layer.get('metadataUrl')">
                <a href="" data-ng-click="showMetadata()">
                  <span translate="">layerMetadata</span>
                </a>
              </li>

              <!-- TODO ? No style selector for WFS-->
              <li role="menuitem" data-ng-if="::!layer.get('wfs') && layer.get('style').length > 0">
                <label data-translate="">selectStyle</label>
                <div data-gn-layer-styles="layer.get('style')"
                     data-gn-layer-styles-on-click="setLayerStyle(layer, style)"
                     data-gn-layer-styles-current="layer.get('currentStyle')"
                     data-gn-layer-styles-layout="select"/>
              </li>

              <!--Opacity slide-->
              <li class="" title="{{'opacity' | translate}}"
                  role="menuitem">
                <label data-translate="">setOpacity</label>
                <input class="" type="range"
                       aria-label="{{'setOpacity' | translate}}"
                      min="0" max="1" step="0.05"
                      ng-model="layer.opacity"/>
              </li>

              <!--WPS-->
              <li class="" data-ng-if="process && process.length == 1"
                  role="menuitem">
                <a href="" data-ng-click="showWPS(process[0])">
                  <span translate="">process</span>
                </a>
              </li>
              <li class="btn-group" ng-if="process && process.length > 1 "
                  role="menuitem">
                <div class="btn-link dropdown-toggle" data-toggle="dropdown">
                  <span translate="">process</span>&nbsp;
                  <span class="caret"></span>
                </div>
                <ul class="dropdown-menu" role="menu">
                  <li ng-repeat="p in process" role="menuitem">
                    <a href="" data-ng-click="showWPS(p)">{{p.desc ||
                      p.name}}</a>
                    </li>
                </ul>
              </li>

              <!--WFS Filter-->
              <li class="" data-ng-if="::wfs" role="menuitem">
                <a href="" data-ng-click="showWFSFilter()">
                  <span translate="">filter</span>
                </a>
              </li>

              <!--Download-->
              <li class="" ng-if="hasDownload"
                           data-gn-wfs-download="layer"
                           data-init-on-demand="true"
                           data-mode="select"
                           has-download="hasDownload" data-map="map" role="menuitem">
              </li>

              <!--Remove layer-->
              <li class="" role="menuitem">
                <a href=""
                  data-ng-click="removeLayer(layer, map)">
                  <span translate="">layerDelete</span>
                </a>
              </li>

              <li class="list-group-item list-group-item-warning"
                  data-ng-show="layer.get('errors').length > 0"
                  role="menuitem">
                <p data-ng-repeat="e in layer.get('errors')"
                   data-ng-bind-html="e"></p>
              </li>

            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="flex-spacer"></div>

    <div class="flex-col flex-grow">
      <div class="width-100 flex-grow">
        <span class="gn-layer-ordering btn-group pull-right">
          <a href="" class="btn btn-default btn-sm fa fa-arrow-up"
             ng-disabled="$first"
             ng-click="moveLayer(layer, 1)"
             title="{{'layerMoveUp'|translate}}"></a>
          <a href="" class="btn btn-default btn-sm fa fa-arrow-down"
             ng-disabled="$last"
             ng-click="moveLayer(layer, -1, $last)"
             title="{{'layerMoveDown'|translate}}"></a>
           <a href=""
              class="btn btn-default btn-sm fa fa-times"
              data-ng-click="removeLayer(layer, map)"
             title="{{'layerDelete'|translate}}"></a>
        </span>
        <label class="gn-map-layer" for="layer-{{$index}}">
          <span data-ng-class="layer.get('errors').length > 0 ? 'text-danger' : ''">
            {{layer.get('label')}}
            <span><em>
              {{layer.get('currentStyle') ? '(' + (layer.get('currentStyle').Title || layer.get('currentStyle').Name) + ')' : ''}}
            </em></span>
          </span>
        </label>
      </div>
      <a href class="width-100 text-right small"
         ng-if="layer.get('legend') || layer.get('attribution')"
         data-ng-click="showInfo(layer)" title="{{'Legend'|translate}}">
        <i class="fa fa-caret-down" ng-if="!layer.showInfo"/>
        <i class="fa fa-caret-up" ng-if="layer.showInfo"/>
        <span translate ng-if="!layer.showInfo">{{'showLegend' | translate}}</span>
        <span translate ng-if="layer.showInfo">{{'hideLegend' | translate}}</span>
      </a>
    </div>
  </div>

  <div class="details width-100" ng-show="layer.showInfo">
    <p ng-if="layer.get('legend')">
      <img alt="{{layer.get('label')}} {{'mapLegend' | translate}}" ng-src="{{layer.get('legend')}}"/>
    </p>
    <h6 ng-if="layer.get('attribution')" data-translate="">Attribution</h6>
    <p ng-if="layer.get('attribution')"><em>{{layer.get('attribution')}}</em></p>
  </div>
</div>
<div ng-if="::layer.get('loading')">
  {{::layer.get('label')}}
  <span class="pull-right fa fa-spin fa-spinner"></span>
</div>
